目前有三個頁面，分別是(以下列出本機端的範例網站)：

• 首頁(http://127.0.0.1:5173/)：這個頁面不論有無登入，都可瀏覽。
• 註冊頁(http://127.0.0.1:5173/register)：這個頁面若是登入狀態的話，瀏覽該頁就導回首頁。
• 建立網頁的後台(http://127.0.0.1:5173/web_build)：這個頁面若是登入狀態的話，才可瀏覽；若是未登入狀態然後瀏覽的話，就導回首頁。

更新 src/App.vue 檔案

原來的以下這段原始碼：

if(body.data.checkJWT){
  this.loginStatus = true;
}else{
  this.loginStatus = false;
}

改成：

if(body.data.checkJWT){
  this.loginStatus = true;
}else{
  localStorage.removeItem("jwt");
  this.loginStatus = false;
}

也就是說，若 checkJWT 是 false 的話，那麼就將 localStorage 裡的 jwt 給移除。因為有可能 jwt 雖然存在，但有可能是過期的狀態。

更新 router/index.js 檔案

在 routes 陣列當中，以下這兩行：

{path: "/web_build", name: "WebBuild", component: () => import("@/views/auth/WebBuild.vue")},
{path: "/register", name: "register", component: () => import("@/views/register.vue")}

改成：

{
  path: "/web_build",
  name: "WebBuild",
  component: () => import("@/views/auth/WebBuild.vue"),
  meta: {
    requiresAuth: true
  }
},
{
  path: "/register",
  name: "register",
  component: () => import("@/views/register.vue"),
  meta: {
    requiresNoAuth: true
  }
}

也就是各自加了 meta 屬性，以及各自的 requiresAuth 及 requiresNoAuth，這兩個其實看要設定什麼都可以，我設定 requiresAuth 的用途是需登入才可瀏覽的頁面；然而 requiresNoAuth 的用途是要在未登入狀態時才可瀏覽的頁面(例：註冊頁)。

然後加一段程式，放在 export default router 這行之前，如下(留意註解中的說明)：

router.beforeEach((to, from) => {
  let jwt = localStorage.getItem("jwt");
  // 若有 requiresAuth，表示需登入，所以沒有 jwt 的話，就導回首頁
  if(to.meta.requiresAuth && !jwt){
    return {name: "Home"} // 導回首頁
  }
  // 若有 requiresNoAuth，表示需未登入，所以有 jwt 的話，就導回首頁
  if(to.meta.requiresNoAuth && jwt){
    return {name: "Home"} // 導回首頁
  }
})

如同註解中的說明，若判斷的結果是 true的話，就導回首頁。

這樣就做到本篇文章一開始的論述囉：

• 首頁：不論有無登入，都可瀏覽。
• 註冊頁：未登入狀態才可瀏覽。
• 建立網頁的後台：需登入可才瀏覽。

結語

總算是有基本的雛形了：前端的 Web APP、伺服器端的 GraphQL API、前後端分離的架構；然後有基本的登入、登出、註冊的功能，以及各頁瀏覽的機制。